<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <input type="text" placeholder="请输入待办事项" @keyup.enter="todoSave(newTodo)" v-model="newTodo">

    <h2>待办事项如下：</h2>
    <ul v-for="item in todo">
        <li>
            <input type="checkbox" v-model="item.ok" @click.prevent="changeStatus(item)">
            {{ item.text }} 
            <a href="javascript:void(0)" @click.prevent="todoRemove(item)">删除</a></li>
    </ul>

</div>
<script src="../vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            todo:[],
            newTodo:'',
            count:0
        },
        methods:{
            todoSave:function (e) {
                this.todo.push({text:e,id:this.count,ok:false});
                this.newTodo = '';
                this.count++;
            },
            todoRemove:function (e) {
                this.todo.splice(this.todo.indexOf(e),1);
            },
            changeStatus:function (e) {
                e.ok = e.ok !== true;
            }
        }
    })
</script>
</body>
</html>